import dayjs from "dayjs";

function Chatlist({ messages }) {
  return (
    <>
      <ul>
        {messages.map((message) => (
          <li key={message._id} style={{ marginBottom: "20px" }}>
            {/* 判断messages中各条对象中前后两条消息的time的时间戳字符串间隔是否大于10分钟，如果大于10分钟，就省略后面的时间戳字符串 */}
            {messages.findIndex((item) => item._id === message._id) > 0 &&
              messages[
                messages.findIndex((item) => item._id === message._id) - 1
              ].time &&
              message.time &&
              Math.abs(
                new Date(message.time).getTime() -
                  new Date(
                    messages[
                      messages.findIndex((item) => item._id === message._id) - 1
                    ].time
                  ).getTime()
              ) /
                1000 /
                60 >
                10 && (
                <div
                  style={{
                    display: "flex",
                    justifyContent: "center",
                    marginBottom: "10px",
                  }}
                >
                  <div
                    style={{
                      color: "gray",
                      fontSize: "14px",
                      lineHeight: "20px",
                    }}
                  >
                    {dayjs(message.time).format("YYYY年MM月DD日 HH:mm")}
                  </div>
                </div>
              )}

            {message.type === "buyer" ? (
              <div>
                <div
                  style={{ display: "flex", justifyContent: "space-between" }}
                >
                  <div></div>
                  <div style={{ lineHeight: "40px" }}>
                    <span
                      style={{
                        marginRight: "15px",
                        color: "gray",
                        fontSize: "20px",
                      }}
                    >
                      nick: {message.user}
                    </span>
                    <img
                      src={message.chat_img}
                      alt=""
                      style={{
                        width: "40px",
                        height: "40px",
                        borderRadius: "50%",
                      }}
                    />
                  </div>
                </div>

                <div
                  style={{ display: "flex", justifyContent: "space-between" }}
                >
                  <div></div>
                  <div className="message-content">{message.content}</div>
                </div>
              </div>
            ) : (
              <div>
                <div style={{ lineHeight: "40px" }}>
                  <img
                    src={message.chat_img}
                    alt=""
                    style={{
                      width: "40px",
                      height: "40px",
                      borderRadius: "50%",
                    }}
                  />
                  <span
                    style={{
                      marginLeft: "10px",
                      color: "gray",
                      fontSize: "20px",
                    }}
                  >
                    {message.user}
                  </span>
                </div>
                <div className="message-content">{message.content}</div>
              </div>
            )}
          </li>
        ))}
      </ul>
    </>
  );
}

export default Chatlist;
